<script setup lang="ts">
// https://github.com/vueuse/head
// you can use this to manipulate the document head in any components,
// they will be rendered correctly in the html results with vite-ssg
useHead({
  title: 'Pancake Pairs',
  meta: [
    { name: 'description', content: 'Opinionated Vite Starter Template' },
  ],
})
</script>

<template>
  <router-view />
</template>

<style>
#app {
  background-image: linear-gradient(180deg,#afcde9 1%,#f7fbe7 100%);
  background-color: #afcde9;
  color: #253449;
  overflow: auto;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}
.card {
  background-color: #fff9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 1.8rem;
  backdrop-filter: blur(33px);
}
</style>